<template>
    <div class="filter-box">
        <div class="input-search-div">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">全部行业</el-breadcrumb-item>
                <el-breadcrumb-item v-for="(parent,pIndex) in parentData" :key="parent.code"
                                    v-if="parentIndex[pIndex] != null">
                    <el-select size="mini" v-model="parentIndex[pIndex]" @change="selectParentParams(pIndex)">
                        <el-option class="mini-select-dropdown" value="-1" label="全部"></el-option>
                        <el-option class="mini-select-dropdown"
                                   v-for="(parentSublist,pcIndex) in parentData[pIndex].sublist" :value="pcIndex"
                                   :key="parentSublist.code" :label="parentSublist.name"></el-option>
                    </el-select>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                    <el-input type="text" :placeholder="placeholder" class="name-input" size="mini" v-model="likeStr"
                              @keyup.enter.native="like(likeStr)"><i slot="suffix"
                                                            class="el-input__icon el-icon-search"></i>
                    </el-input>
                    <el-button type="primary" size="mini" @click="like(likeStr)" >搜索</el-button>
                </el-breadcrumb-item>
            </el-breadcrumb>

<!--            <el-button :plain="true" size="mini" class="toggle-brn" @click="changeToggle"> {{toggle ?-->
<!--                '收起筛选'-->
<!--                :'展开筛选'}}<i class="el-icon&#45;&#45;right" :class="toggle  ? 'el-icon-arrow-up' :'el-icon-arrow-down'"></i>-->
<!--            </el-button>-->
        </div>
        <el-collapse-transition>
            <ul v-if="toggle">
                <li v-for="(d,dIndex) in filterData">
                    <div class="search-item-name">
                        <span>{{d.name}}:</span>
                    </div>
                    <div class="filter-item-box">
                        <span class="filter-item" :class="paramsIndex[dIndex] == 0 ? 'selected' :''"
                              @click="selectParentParams(dIndex)">全部</span>
                        <span class="filter-item" :class="paramsIndex[dIndex] == iIndex+1 ? 'selected' :'' "
                              v-for="(item,iIndex) in d.sublist" :key="item.code" @click="selectParams(dIndex,iIndex)">{{item.name}}</span>
                    </div>
                </li>
                <li v-if="otherData != undefined && otherData.length > 0" class="other-data-li">
                    <div class="search-item-name">
                        <span>其他:</span>
                    </div>
                    <div class="filter-item-box">
                        <span class="filter-item" v-for="(other,oIndex) in otherData">
                            <el-dropdown @command="selectOtherParams">
                              <span class="el-dropdown-link">
                                {{ otherParams[oIndex] != undefined ? otherParams[oIndex].name : other.name}}<i
                                      class="el-icon-arrow-down el-icon--right"></i>
                              </span>
                              <el-dropdown-menu slot="dropdown" class="mini-dropdown-menu">
                                <el-dropdown-item :class="otherParamsIndex[oIndex] == oiIndex ? 'selected' : ''"
                                                  :command="oIndex+'-'+oiIndex"
                                                  v-for="(otherItem,oiIndex) in other.sublist" :key="otherItem.code">{{otherItem.name}}</el-dropdown-item>
                              </el-dropdown-menu>
                            </el-dropdown>
                        </span>
                    </div>
                </li>
            </ul>
        </el-collapse-transition>
    </div>
</template>

<script>
    export default {
        name: "filter-box",
        props: {
            data: {
                type: Array,
            },
            otherData: {//
                type: Array,
            },
            placeholder: ""
        },
        data: function () {
            return {
                toggle: true,//搜索隐藏
                filterData: [],//显示参数
                params: [],//返回参数
                parentIndex: [],
                parentData: [],
                paramsLevel: [],
                paramsIndex: [],
                otherParams: [],
                otherParamsIndex: [],
                likeStr: ""
            }
        },
        methods: {
            selectParams(dIndex, iIndex) {
                let currentFilterItem = this.filterData[dIndex].sublist[iIndex];
                this.params[dIndex][this.paramsLevel[dIndex]] = {
                    name: currentFilterItem.name,
                    code: currentFilterItem.code
                };
                if (currentFilterItem.sublist != undefined && currentFilterItem.sublist.length > 0) {
                    this.$set(this.parentData, dIndex, this.filterData[dIndex])
                    this.parentIndex[dIndex] = iIndex;
                    this.$set(this.filterData, dIndex, currentFilterItem);
                    this.paramsLevel[dIndex] = ++this.paramsLevel[dIndex];
                    this.$set(this.paramsIndex, dIndex, 0);
                } else {
                    this.$set(this.paramsIndex, dIndex, iIndex + 1);
                }
                //通知参数改变了
                this.$emit('change', this.params, this.likeStr)
            },
            selectParentParams(pIndex) {
                let pcIndex = this.parentIndex[pIndex];
                if (pcIndex == -1) {
                    this.$set(this.parentData, pIndex, [])
                    this.parentIndex[pIndex] = null;
                    this.$set(this.filterData, pIndex, this.data[pIndex]);
                    this.paramsLevel[pIndex] = --this.paramsLevel[pIndex];
                    level = this.paramsLevel[pIndex];
                    this.$set(this.paramsIndex, pIndex, pcIndex + 1);
                    this.params[pIndex] = [];
                    this.params[pIndex].splice(this.paramsLevel[pIndex], 1);
                    //通知参数改变了
                    this.$emit('change', this.params, this.likeStr)
                    return;
                }
                let parentItem = this.parentData[pIndex].sublist[pcIndex];
                let level = 0;

                if (parentItem.sublist != undefined && parentItem.sublist.length > 0) {
                    this.$set(this.filterData, pIndex, parentItem);
                    level = this.paramsLevel[pIndex] - 1;
                    this.$set(this.paramsIndex, pIndex, 0);
                } else {
                    this.$set(this.parentData, pIndex, [])
                    this.parentIndex[pIndex] = null;
                    this.$set(this.filterData, pIndex, this.data[pIndex]);
                    this.paramsLevel[pIndex] = --this.paramsLevel[pIndex];
                    level = this.paramsLevel[pIndex];
                    this.$set(this.paramsIndex, pIndex, pcIndex + 1);
                }
                this.params[pIndex].splice(this.paramsLevel[pIndex], 1);
                this.params[pIndex][level] = {
                    name: parentItem.name,
                    code: parentItem.code
                };
                //通知参数改变了
                this.$emit('change', this.params, this.likeStr)
            },
            like(likeStr) {
                this.likeStr = likeStr;
                this.$emit('change', this.params, this.otherData, this.likeStr)
            },
            selectOtherParams(c) {
                let cs = c.split("-");
                let oIndex = cs[0];
                let oiIndex = cs[1];
                this.otherParamsIndex[oIndex] = oiIndex;
                this.$set(this.otherParamsIndex, oIndex, oiIndex)
                this.$set(this.otherParams, oIndex, this.otherData[oIndex].sublist[oiIndex])
                this.$emit('change', this.params, this.otherParams, this.likeStr)
            },
            changeToggle() {
                this.toggle = !this.toggle;
            }
        },
        mounted() {
            this.filterData = this.data.concat();//副本
            //初始化
            for (let i = 0; i < this.filterData.length; i++) {
                this.paramsLevel[i] = 0;
                this.paramsIndex[i] = 0;
                this.params[i] = [];
            }
        }
    }
</script>

<style>
    .filter-box {
        padding:5px;
    }

    .filter-box .input-search-div {
        display: flex;
        border-bottom: none;
        position: relative;
        line-height: 28px;
        font-size: 13px;
        padding: 10px 0px 10px 15px;
    }

    .filter-box .el-breadcrumb {
        line-height: 25px;
        font-size: 13px;
    }

    .filter-box .input-search-div .el-select .el-input {
        width: 150px;
    }

    .filter-box .input-search-div .name-input {
        width: 150px;
        margin-right: 10px;
    }

    .filter-box ul {
        padding: 0 10px;
        background-color: #fff;
    }

    .filter-box li {
        line-height: 20px;
        padding: 8px 0px 8px 5px;
        border-top: 1px solid #F2F6FC;
        overflow: hidden;
    }

    .filter-box .filter-item-box {
        width: 90%;
        float: left;
    }

    .filter-box .filter-item {
        margin-right: 13px;
        line-height: 28px;
        font-size: 13px;
        color: #303133;
        cursor: pointer;
    }

    .filter-box .filter-item:hover {
        color: #409EFF;
    }

    .filter-box .filter-item.selected {
        color: #007cdc;
        font-weight: 600;
    }

    .filter-box .search-item-name {
        font-size: 13px;
        width: 10%;
        color: #303133;
        font-weight: 700;
        float: left;
        line-height: 28px;
    }

    .filter-box .other-data-li .filter-item {
        margin-right: 20px;
    }

    .filter-box .el-dropdown {
        font-size: 13px;
        color: #303133;
    }


    .filter-box .toggle-brn {
        padding: 7px 7px;
        position: absolute;
        right: 10px;
    }

    .mini-dropdown-menu .el-dropdown-menu__item {
        font-size: 13px;
        line-height: 30px;
        color: #303133;
    }

    .mini-select-dropdown {
        font-size: 13px;
        line-height: 30px;
        color: #303133;
    }

    .mini-dropdown-menu .selected {
        color: #007cdc;
        font-weight: 600;
    }

</style>